<template>
	<view>
		<view class="group-title">
			<view class="">
				{{i18n.USDBalanceIsNotLessThan}}{{cash_c}},{{i18n.ToBeGrouped}}

			</view>
			<button type="primary" :loading="loading" hover-class="active" @tap.stop="allGroup">{{i18n.GroupAllAccounts}}</button>
		</view>
		
		<view class="group-centent-title">
			{{i18n.ListOfBoundUsers}}
		</view>
		<view class="group-centent">
			<view class="list">
				<template v-if="list.length>0">
					<block v-for="(item,index) in list" :key="index">
						<view class="list-item">
							<view class="title">
								<view class="item">
									UID {{item.username}}
								</view>
								<view class="item">
									<text @tap.stop="untie(index)">{{i18n.Untie}}</text>
									<text @tap.stop="group(index)">{{i18n.Group}}</text>
								</view>
							</view>
							<view class="items">
								<text>USD{{i18n.Balance}}</text>
								<text>{{item.USD_balance?item.USD_balance:'0'}}</text>
							</view>
						</view>
					</block>
				</template>
				<template v-else>
					<view class="nodata">{{i18n.nodata}}</view>
				</template>
			</view>
		</view>
		
		<!-- <button type="primary" @tap="jumpAddGroup"  style="margin-top: 40upx;">跳转添加页面</button> -->
		<Load v-if="showLoad"></Load>
	</view>
</template>

<script>
	import Load from '../../components/common/load.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		components:{
			Load
		},
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType',
				'getLang'
			])
		},
		data() {
			return {
				showLoad:false,
				loading:false,
				list : [],
				cash_c:'',
				page:1
			};
		},
		onShow(){
			this.page=1;
			this.list = [];
			this.getList()
		},
		onNavigationBarButtonTap(e) {
			if(e.index==0){
				this.jumpAddGroup()
			}
		},
		onPullDownRefresh() {
			this.page =1;
			this.list = [];
			this.getList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			this.getLists()
		},
		methods:{
			jumpAddGroup(){
				uni.navigateTo({
					url:'/pages/group/add-group'
				})
			},
			getList(){
				this.showLoad = true;
				let url = this.getRequestUrl + "/api/user/bandList"
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					lang_type:this.getLang,
					rows:10,
					page:this.page
				}
				fetch(url,data,'POST').then(res=>{
					this.showLoad = false
					this.cash_c = res.data.data.cash_c
					if(res.data.data.data.length==0){
						return
					}
					if(res.data.code==1){
						this.list = res.data.data.data;
						this.page++
					}
				})
			},
			getLists(){
				this.showLoad = true;
				let url = this.getRequestUrl + "/api/user/bandList"
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					lang_type:this.getLang,
					rows:10,
					page:this.page
				}
				fetch(url,data,'POST').then(res=>{
					this.showLoad = false
					this.cash_c = res.data.data.cash_c
					if(res.data.data.data.length==0){
						return
					}
					if(res.data.code==1){
						this.list = this.list.concat(res.data.data.data);
						this.page++
					}
				})
			},
			allGroup(){
				this.loading = true;
				this.showLoad = true;
				let url = this.getRequestUrl + "/api/user/userOneK"
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					lang_type:this.getLang
				}
				let _this = this
				uni.showModal({
					title: _this.i18n.message,
					content:_this.i18n.comfirm_group,
					success:(res)=>{
						if (res.confirm) {
							fetch(url,data,"POST").then(res=>{
								showToast(res.data.msg)
								_this.showLoad = false;
								_this.loading = false;
								if(res.data.code){
									this.list =[];
									this.page =1;
									this.getList()
								}
							})
						}else{
							_this.showLoad = false;
							_this.loading = false;
						}
					}
				})
			},
			untie(index){
				console.log('untie');
				this.showLoad = true;
				
				let url = this.getRequestUrl + "/api/user/jieBand"
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					lang_type:this.getLang,
					bid:this.list[index].id
				}
				
				let _this = this
				uni.showModal({
					title: _this.i18n.message,
					content:_this.i18n.comfirm_untie,
					success:(res)=>{
						if (res.confirm) {
							fetch(url,data,'POST').then(ret=>{
								_this.showLoad = false;
								if(ret.data.code==1){
									_this.list.splice(index,1)
								}
							})
						}else{
							_this.showLoad = false;
						}
					}
				})
			},
			group(index){
				this.showLoad = true;
				
				let url = this.getRequestUrl + "/api/user/userDanG"
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					lang_type:this.getLang,
					bid:this.list[index].id
				}
				let _this = this
				uni.showModal({
					title: _this.i18n.message,
					content:_this.i18n.comfirm_all_group,
					success:(res)=>{
						if (res.confirm) {
							fetch(url,data,"POST").then(res=>{
								showToast(res.data.msg)
								_this.showLoad = false;
								if(res.data.code){
									this.list =[];
									this.page =1;
									this.getList()
								}
							})
						}else{
							_this.showLoad = false;
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scopeds>
	page{
		background-color: #eff3f7;
	}
	.group-title{
		padding: 60upx 0 40upx;
		background-color: #FFFFFF;
		view{
			width: 466upx;
			margin:0 auto;
			font-size: 28upx;
			color: #000000;
			text-align: center;
			font-weight: bold;
		}
		button{
			margin-top: 42upx;
			width: 330upx;
			height: 70upx;
			line-height: 70upx; 
			background: linear-gradient(to right , #0C48E0, #2AA2FF);
			border-radius:35upx;
			color: #FFFFFF;
			font-size:24upx;
			&.active{
				transform: scale(.9);
				opacity: .9;
			}
		}
	}
	.group-centent-title{
		line-height: 100upx;
		color: #333333;
		font-size:28upx;
		font-weight: bold;
		padding-left: 30upx;
	}
	.group-centent{
		background-color: #FFFFFF;
		.list{
			padding: 0 30upx;
			.nodata{
				text-align: center;
				line-height: 80upx;
				color: #cfcfcf;
			}
			.list-item{
				padding:20upx 0;
				border-bottom: 1upx solid #cfcfcf;
				.title{
					line-height: 100upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					// border-bottom: 1upx solid #cfcfcf;
					.item{
						&:first-of-type{
							color: #666666;
							font-size:23upx;
						}
						&:last-of-type{
							display: flex;
							align-items: center;
							justify-content: space-between;
							text{
								font-size:26upx;
								color: #0D79FF;
								&:first-of-type{
									margin-right: 54upx;
								}
							}
						}
					}
				}
				&:last-of-type{
					border-bottom:0;
				}
				.items{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size:24upx;
					color: #000000;
					text{
						line-height: 60upx; 
					}
				}
			}
		}
	}
</style>
